<template>
  <view class="shopingCar">
    <u-popup :show="shopingCarShow" mode="bottom" @close="shopingCarClose">
      <view class="shoping_car_model_box">
        <view class="shoping_car_model_box_top">
          <view class="fn-sz-28 fn-cl-333333">已选商品</view>
          <view class="clear_car_box">
            <image class="icon-26 mar-right-10" src="../../static/images/icon/icon_del_history.png" mode=""></image>
            <view class="fn-sz-26 fn-cl-999999" @tap="clearShopingCar">清空</view>
          </view>
        </view>
        <view class="shoping_car_goods_list">
          <view class="shoping_car_goods_item" v-for="(item, index) in shopingCarList" :key="index">
            <view class="shoping_car_goods_name more-text">{{ item.name }}</view>
            <view class="shoping_item_op_box">
              <view class="shoping_item_price ">￥{{ item.price }}</view>
              <view class="btn_box">
                <image class="icon-44" src="../../static/images/icon/icon_del_btn.png" mode="" @tap="countFunc(item, false)"></image>
                <view class="num_box">{{ item.num }}</view>
                <image class="icon-44" src="../../static/images/icon/icon_add_btn.png" mode="" @tap="countFunc(item, true)"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="shoping_car_bottom_op_box">
          <view class="shoping_car_bottom_left_box">
            <view class="shoping_car_image">
              <image class="icon-100" src="../../static/images/icon/icon_shoping_car_big.png" mode=""></image>
              <view class="shoping_car_num">{{ totalGoodsNum }}</view>
            </view>
            <view class="shoping_car_total_pirce_box">
              <view class="fn-sz-24 fn-cl-666666">
                <span class="mar-right-10">合计金额:</span>
                ￥{{ totalPrice }}
              </view>
              <view class="fn-sz-24 fn-cl-666666">
                <span class="mar-right-10">商品数量:</span>
                {{ totalGoodsNum }}
              </view>
            </view>
          </view>
          <view class="go_settle" @tap="goCreateOrder">去结算(￥{{ totalPrice }})</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'shopingCar',

  data () {
    return {
      shopingCarShow: false
    };
  },
  mounted () { },
  methods: {
    ...mapMutations(['SET_SHOPING_CAR_LIST']),
    shopingCarClose () {
      this.shopingCarShow = false;
    },

    countFunc (item, countType) {
      let shopingCarList = this.shopingCarList.filter(elem => {
        var isNewGoods = false;
        if (Number(elem.new_price)) {
          isNewGoods = true;
        }
        if (elem.id == item.id) {
          if (countType) {
            if (!isNewGoods) {
              if (elem.num < elem.limit) {
                elem.num += 1;
              } else {
                this.$helper.toast(`今日商品限购${elem.day_limit_buy}件,超过购买数量`);
              }
              return elem;

            } else {
              this.$helper.toast('新人商品只能添加一个!');
              return elem;
            }
          } else {
            if (elem.num - 1 != 0) {
              elem.num -= 1;
              return elem;
            }
          }
        } else {
          return elem;
        }
      });
      this.SET_SHOPING_CAR_LIST(shopingCarList);
    },
    clearShopingCar () {
      this.SET_SHOPING_CAR_LIST([]);
    },
    goCreateOrder () {
      uni.navigateTo({
        url: `/pages/shop/goodsSubmitOrder?type=car`
      });
    }
  },
  computed: {
    ...mapGetters(['totalGoodsNum', 'totalPrice']),
    shopingCarList () {
      return this.$store.state.shopingCarList;
    }
  }
};
</script>

<style lang="scss">
.shopingCar {
  .shoping_car_model_box {
    background-color: #f9f9f9;
    .shoping_car_model_box_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx;
      .clear_car_box {
        display: flex;
        align-items: center;
      }
    }
    .shoping_car_goods_list {
      min-height: 160rpx;
      padding: 0 24rpx;
      .shoping_car_goods_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .shoping_car_goods_name {
          width: 60%;
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          flex: none;
        }
        .shoping_item_op_box {
          flex: none;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shoping_item_price {
            font-size: 28rpx;
            color: #f34035;
            text-align: right;
            flex: 1;
          }
          .btn_box {
            display: flex;
            align-items: center;
            flex: none;
            margin-left: 20rpx;
            .num_box {
              width: 44rpx;
              height: 44rpx;
              text-align: center;
              line-height: 44rpx;
            }
          }
        }
      }
    }
    .shoping_car_bottom_op_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      padding: 24rpx;

      .shoping_car_bottom_left_box {
        padding-left: 120rpx;
        position: relative;
        .shoping_car_image {
          position: absolute;
          left: 0;
          top: -54rpx;
          .shoping_car_num {
            position: absolute;
            right: -8rpx;
            top: -6rpx;
            background-color: #f34035;
            border-radius: 50%;
            color: #fff;
            font-size: 26rpx;
            width: 40rpx;
            text-align: center;
            line-height: 40rpx;
            height: 40rpx;
          }
        }
        .shoping_car_total_pirce_box {
        }
      }
      .go_settle {
        color: #333;
        font-weight: bold;
        font-size: 30rpx;
        padding: 15rpx 30rpx;
        background-color: #fed100;
        border-radius: 40rpx;
      }
    }
  }
}
</style>
